<template>
  <div id="player">
    <!-- <h2 class="title">黑云音乐</h2> -->
    <!-- 轮播图 -->
    <MySwiper></MySwiper>
    <div class="search">
      <input type="text" v-model="keyword" @keyup.enter="gotoResult"/>
      <button>
        <span class="iconfont icon-search" @click="gotoResult"></span>
      </button>
    </div>
    <div class="tab-wrapper">
      <!-- tab栏 -->
      <div class="tab-bar">
        <!-- <router-link to="/results" class="bar-item" active-class="active">搜索结果</router-link> -->
        <!-- <router-link to="/player" class="bar-item" active-class="active">歌曲播放</router-link> -->
        <!-- <router-link to="/video" class="bar-item" active-class="active">mv</router-link> -->
        <!-- <router-link to="/comment" class="bar-item" active-class="active">歌曲评论</router-link> -->
        <!-- <router-link to="results" class="bar-item" active-class="active">推荐歌曲</router-link> -->
      </div>
      <!-- 对应的内容区域 -->
      <div class="tab-content">
      </div>
    </div>
  </div>
</template>

<script>
// 导入轮播图
import MySwiper from './MySwiper.vue'
export default {
  data(){
    return {
      keyword:''
    }
  },
  components: {
    // 注入轮播图
    MySwiper
  },
  methods:{
    gotoResult(){
      if(this.keyword==""){
        alert('不能为空');
        return
      }
      this.$router.push("/results/"+this.keyword)
      this.keyword=""
      // console.log(this.keyword)
    },
  }
};
</script>

<style scoped>
/* 这里的 @ 符号代表的当前项目的 src 路径，路径别名 */
@import "@/assets/css/index.css";
</style>
